<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>폼 객체</title>
<script type="text/javascript">
// 폼을 조작하는 컨트롤 객체
var formCtrl = {
	// 신발 사이즈 세트
	size: {
		X: [250, 255, 260, 265, 270, 275, 280, 285, 290],
		Y: [210, 215, 220, 225, 230, 235, 240, 245, 250, 255, 260]
	},
	// 발크기 <select> 엘리먼트의 내부 <option> 을 모두 바꾸는 메서드.
	changeSize: function(sex){
		var select = document.forms['shoesForm'].usersize;
		var arrSize = this.size[sex];
		var arrHTML = [];
		for (var i = 0; i < arrSize.length; i++) {
			arrHTML.push(
					'<option value="', arrSize[i], '">',
					arrSize[i],
					'</option>'
			);
		}
		select.innerHTML = arrHTML.join('');
	},
	// 전체 체크박스의 상태대로 다른 체크박스들도 똑같은 상태로 바꾸어 주는 메서드.
	allCheck: function(checked) {
		var checkboxs = document.forms['shoesForm'].uses;
		for (var i = checkboxs.length - 1; i > -1; i--) {
			checkboxs[i].checked = checked;
		}
	}
};
// 폼을 검증하는 객체
var validator = {
	// 사용자에게 메시지를 전달시켜 주는 메서드
	message: function(msg) {
		alert(msg);
	},
	// 체크박스나 라디오버튼의 배열을 받아 
	// 선택된 값들을 배열 형태로 모아 반환하는 메서드
	getCheckedValues: function(arrElem) {
		var checkedValues = [];
		for (var i = arrElem.length - 1; i > -1; i--) {
			var elem = arrElem[i];
			if (elem.checked) {
				checkedValues.push(elem.value);
			}
		}
		return checkedValues;
	},
	// 셀렉트 콤포박스를 받아 
	// 선택된 값들을 배열 형태로 모아 반환하는 메서드
	getSelectedValues: function(select) {
		var selectedValues = [];
		for (var i = select.options.length - 1; i > -1; i--) {
			var elem = select.options[i];
			if (elem.selected) {
				selectedValues.push(elem.value);
			}
		}
		return selectedValues;
	},
	// <form name="loginForm"> 객체를 점검하여 
	// 참(true) 혹은 거짓(false) 값을 반환하는 메서드
	validate: function() {
		// <form> 엘리먼트를 변수에 담아 둔다.
		var elForm = document.forms['shoesForm'];
		// <input name="usersex" /> 객체들 중에 선택된 값들을 받아온
		// 배열의 길이가 0이라면 (빈 배열이라면)
		if (this.getCheckedValues(elForm.usersex).length === 0) {
			this.message('성별을 선택해 주셔야 합니다.');
			return false;
		}
		// <select> 객체에 선택된 값들을 받아온
		// 배열의 길이가 0이라면 (빈 배열이라면)
		if (this.getSelectedValues(elForm.usersize).length === 0) {
			this.message('발 크기를 선택해 주셔야 합니다.');
			elForm.usersize.focus();
			return false;
		}
		// <input name="uses" /> 객체들 중에 선택된 값들을 받아온
		// 배열의 길이가 0이라면 (빈 배열이라면)
		if (this.getCheckedValues(elForm.uses).length === 0) {
			this.message('용도를 한가지 이상 선택해 주셔야 합니다.');
			return false;
		}
		this.message('데이터를 전송합니다.');
	}
};
</script>
</head>
<body>
	<form name="shoesForm" action="9-2.html" 
			onsubmit="return validator.validate();">
		<p>
			성별: 
			<input type="radio" name="usersex" value="X" 
						onclick="formCtrl.changeSize(this.value);" />
			<input type="radio" name="usersex" value="Y" 
						onclick="formCtrl.changeSize(this.value);" />
		</p>
		<p>
		발크기:
			<select name="usersize"></select>
		</p>
		<p>
		용도: 
			<label>전체 
				<input type="checkbox" onclick="formCtrl.allCheck(this.checked);" />
			</label>
			<br />
			<label>등산 <input type="checkbox" name="uses" value="1" /></label>
			<label>낚시 <input type="checkbox" name="uses" value="2" /></label>
			<label>수영 <input type="checkbox" name="uses" value="3" /></label>
			<label>조깅 <input type="checkbox" name="uses" value="4" /></label>
			<label>산책 <input type="checkbox" name="uses" value="5" /></label>
		</p>
		<button type="submit">보내기</button>
	</form>
</body>
</html>
